<template>
  <div class="order_list">
    <title-bar :title="'优惠券'" />
     <van-tabs sticky  @click="handleTabClick">
        <van-list v-model="loading" :finished="finished" :immediate-check="false" :offset="100" @load="loadMore">
          <van-cell-group v-for="(el, i) in items" class="order_list--panel" :key="i">
            <item-coupon :el="el" />
          </van-cell-group>
        </van-list>
    </van-tabs> 

    <is-empty v-if="isEmpty">抱歉,没有找到符合条件的优惠券</is-empty>

  </div>
</template>

<script>
	import {
	  ELE_COUPON_LISTS
	} from '@/api/order';

	import {
	  Tab,
	  Tabs,
	  Panel
	} from 'vant';
	import IsEmpty from "@/vue/components/is-empty/";
	import loadMore from '@/vue/mixin/list-load-more';
	import scrollFixed from '@/vue/mixin/scroll-fixed';
	import ItemCoupon from '@/vue/components/item-coupon/';
	import TitleBar from '@/vue/components/title-bar/';

	export default {
	  name: 'order-list',
	  mixins: [loadMore, scrollFixed],

	  props: {
	    active: {
	      type: [String, Number],
	      default: 0
	    }
	  },

	  computed: {
	  },

	  data() {
		//const activeIndex = this.active;

	    return {
	      //activeIndex,
	      items: [],
	      /* tabsItem: [{
	          name: "全部",
	        },
	        {
	          name: "待使用",
	          status:0,
	        },
	        {
	          name: "已使用",
	          status: 1,
	        },
	        {
	          name: "已过期",
	          status: -1,
	        }
		  ], */
	    } 
	  },
	  watch: {
	    '$route': 'resetInit'
	  },

	  created() {
	    this.resetInit();
	  },

	  methods: {
	    initData() {
	      //const i = this.active;
	      //const status = this.tabsItem[i].status;
	      return this.$reqGet(ELE_COUPON_LISTS, {	
	        memberId: this.user.id,
					centreId:this.user.centreId,
	        offset: (this.pages.currPage - 1) * this.pages.perPage,
	        limit: this.pages.perPage
	      }, {
	        hideLoading: true
	      }).then(res => {
			const { rows, total } = res.data.data;
			this.items.push(...rows);
			return {
				pageCount: rows.length,
				totalCount: total
			};
	      })
	    },
	    handleTabClick(index) {
	      this.$router.replace({
	        name: "user-coupon-list",
	        params: {
	          active: index
	        }
	      })
	    },
	  },
	  components: {
	    [Tab.name]: Tab,
	    [Tabs.name]: Tabs,
	    [Panel.name]: Panel,
			[IsEmpty.name]: IsEmpty,
			[ItemCoupon.name]: ItemCoupon,
      [TitleBar.name]: TitleBar
	  }
	}

</script>

<style lang="scss" scoped>
	.order_list {
		padding-bottom: 0;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: scroll;
		&--footer_btn {
			text-align: right;
		}
		&--panel{
			margin-bottom: 10px;
		}
		
		&--van-card{
			background-color: #fafafa;
		}
		
		&--total{
			text-align: right;
			padding: 10px;
		}
	}

</style>
